<template>
    <div class="article-list">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="iconfont icon-wenzhangliebiaoxiangqing"></i> 文章管理</el-breadcrumb-item>
                <el-breadcrumb-item>文章列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="search-box">
                <el-form :inline="true" :model="form" ref="searchForm">
                    <el-button  icon="el-icon-delete" type="primary" @click="cancel_batch(id_strs)">批量删除</el-button>
                    <el-form-item label="选择类型">
                        <el-select v-model="form.enabled" placeholder="请选择">
                            <el-option  v-for="item,index in options" :key="index" :label="item.name" :value="item.type">{{item.name}}</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-date-picker value-format="yyyy-MM-dd" type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"  v-model="form.datetime" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-input class="search-input" v-model="form.keywords" placeholder="筛选关键词"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="id"
                        width="55"
                        label="id">
                </el-table-column>
                <el-table-column width="80" label="缩略图">
                    <template slot-scope="scope">
                        <div class="image-wrap">
                            <img :src="scope.row.image" alt="">
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="title"
                        width="250"
                        label="文章标题">
                </el-table-column>
                <el-table-column
                        prop="browse_number"
                        label="浏览量"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="like_number"
                        label="点赞数量"
                        width="100">
                </el-table-column>
                <el-table-column
                        label="日期">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.updated_at }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                icon="el-icon-edit"
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <template v-if="scope.row.enabled">
                            <el-button v-if="scope.row.is_recommend==0"
                                       type="primary"
                                       size="mini"
                                       icon="iconfont icon-tuijian"
                                       @click="handleRecommend(scope.$index, scope.row)">设为推荐</el-button>
                            <el-button v-if="scope.row.is_recommend==1"
                                       type="danger"
                                       size="mini"
                                       icon="iconfont icon-tuijian"
                                       @click="handleRecommend(scope.$index, scope.row)">取消推荐</el-button>
                            <el-button v-if="scope.row.is_top==0"
                                       type="primary"
                                       size="mini"
                                       icon="iconfont icon-top01"
                                       @click="handleTop(scope.$index, scope.row)">设为置顶</el-button>
                            <el-button v-if="scope.row.is_top==1"
                                       type="danger"
                                       size="mini"
                                       icon="iconfont icon-top01"
                                       @click="handleTop(scope.$index, scope.row)">取消置顶</el-button>
                            <el-button
                                    icon="el-icon-delete"
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>

                        <template v-else>
                            <el-button
                                    icon="el-icon-delete"
                                    size="mini"
                                    type="danger"
                                    @click="handleDeleteComplete(scope.$index, scope.row)">彻底删除</el-button>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        :page-size="pagerCount"
                        layout="prev, pager, next"
                        @current-change="handlePageChange"
                        :total="total">
                </el-pagination>
            </div>
        </div>
        <el-dialog width="70%" title="修改文章" :visible.sync="dialogEditArticleVisible">
            <EditArticle @EditArticleSuccess="EditArticleSuccess" :article_id="article_id" v-if="dialogEditArticleVisible"/>
        </el-dialog>
    </div>
</template>

<script>
    import EditArticle from 'components/pages/article/EditArticle'
    export default {
        name: "article-list",
        data(){
            return {
                input:'',
                tableData: [],
                total:2000,
                pagerCount:10,
                page:1,
                dialogEditArticleVisible:false,
                article_id:0,
                id_strs:'',
                options:[
                    {name:'可用',type:1},
                    {name:'不可用',type:0},
                ],
                form:{
                    datetime:'',
                    enabled:1,
                    keywords:'',
                },
                reword:[
                    {a:1,b:2},
                    {a:'ee',b:33}
                ]
            }
        },
        created(){
          this._get_article();
        },
        components:{
            EditArticle
        },
        methods:{
            _get_article(){  //获取文章
              this.getAjax('admin/get_article',{page:this.page,count:20,...this.form}).then(res=>{
                  if(res.code ==1){
                      this.tableData = res.data.data;
                      this.total = res.data.total;
                  }
              })
            },
            onSubmit(v){  //表单查询操作
                this._get_article();
               console.log(this.form);
            },
            EditArticleSuccess(){    //编辑成功之后的捕获操作
                this.dialogEditArticleVisible = false;
                this._get_article();
            },
            handleRecommend(index,obj){  //推荐操作

                let warningText = '';

                warningText = obj.is_recommend === 0 ? '确定把此文章设置为推荐?' : '确定取消推荐?';

                this.$confirm(warningText,'温馨提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(res=>{
                    this.getAjax('admin/set_recommend',{id:obj.id,recommend:obj.is_recommend}).then(res=>{
                        if(res.code){
                            this.$message.success(res.msg);
                            this._get_article();
                        }
                    })
                }).catch((res)=>{

                })
            },
            handleTop(index,obj){   //置顶操作
                let warningText = '';

                warningText = obj.is_recommend === 0 ? '确定把此文章设置为置顶?' : '确定取消置顶?';

                this.$confirm(warningText,'温馨提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(res=>{
                    this.getAjax('admin/set_top',{id:obj.id,top:obj.is_top}).then(res=>{
                        if(res.code){
                            this.$message.success(res.msg);
                            this._get_article();
                        }
                    })
                }).catch((res)=>{

                })
            },
            cancel_batch(id){  //批量删除

                if(!id){
                    this.$message.warning('请选择想要删除的文章');
                    return;
                }
                this.$confirm('是否删除？','温馨提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    this.removeArticle(id);
                }).catch(()=>{

                })

            },
            handleSelectionChange(val){   //下拉选择
                let id_arr = [];
                val.forEach((item,index)=>{
                    id_arr.push(item.id);
                });
                this.id_strs = id_arr.join(',');

            },
            handleEdit(index,obj){   //编辑操作
                this.article_id = obj.id;
                this.dialogEditArticleVisible = true;
            },
            handleDelete(index,obj){   //删除按钮操作
                console.log(index,obj);
                this.$confirm('是否删除？','温馨提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    this.removeArticle(obj.id);
                }).catch(()=>{

                })

            },
            handleDeleteComplete(index,obj){  //彻底删除文章

                this.$confirm('是否删除？','温馨提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    this.getAjax('admin/cancel_completely_article',{
                        id:obj.id,
                    }).then(res=>{
                        console.log(res);
                        if(res.code){
                            this.$message({
                                type: 'success',
                                message: res.msg
                            });
                            this._get_article();
                        }

                    })
                }).catch(()=>{

                })
            },
            handlePageChange(v){  //分页处理
                this.page = v;
                this._get_article();
            },

            removeArticle(id){    //软删除 文章
                this.getAjax('admin/cancel_article',{
                    id:id,
                }).then(res=>{
                    console.log(res);
                    if(res.code){
                        this.$message({
                            type: 'success',
                            message: '已取消删除'
                        });
                        this._get_article();
                    }

                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .search-box{
        margin-bottom: 20px;
    }
    .search-input{
        width: 300px;
        display: inline-block;
        position: relative;
        top: 1px;
    }

    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .pagination{
        margin-top: 20px;
    }
    .image-wrap{
        width: 60px;
        height: 60px;
        overflow: hidden;
        img{
            width: 100%;
            height: auto;
        }
    }
</style>